﻿@model ProggyImagePicker
@{
    // get config object
    var configObject = Model.GetConfigObject<ProggyImagePickerConfigObject>();

    // add css
    Html.AddToBackEndContent("~/Areas/ProggyCore/Content/Css/ProggyImagePicker.css", BackEndContentType.Stylesheet);

    // add nailthumb
    Html.AddToBackEndContent("~/Areas/ProggyCore/Content/ThirdParty/NailThumb.1.1/NailThumb/jquery.nailthumb.1.1.min.js", BackEndContentType.JavaScript);

    // render for lightbox
    Html.RenderBackEndContentForLightboxPartial();

    // get tab ids
    var internalTabId = Model.GetUniqueElementId("", "");
    var externalTabId = Model.GetUniqueElementId("", "");

    // get area ids
    var internalAreaId = Model.GetUniqueElementId("", "");
    var externalAreaId = Model.GetUniqueElementId("", "");
}
<noscript>
    <div class="proggy-noscript">
        THIS EDITOR WILL NOT WORK WITHOUT JAVASCRIPT TURNED ON AND IT WOULD BE DANGEROUS
        TO USE THE EDITOR WHILST JAVASCRIPT IS TURNED OFF. PLEASE TURN JAVASCRIPT ON.</div>
</noscript>
<div class="proggy-form-div">
    <div class="ip">
        @Html.CheckBox(Model.PropertyNameStart + ".IsExternalImage", Model.IsExternalImage)
        @Html.Hidden(Model.PropertyNameStart + ".InternalAltTag", Model.InternalAltTag)
        <div class="ip-dimensions" style="margin-bottom: 2em;">
            <p>
                Width: @Html.TextBox(Model.PropertyNameStart + ".Width", Model.Width, new { @class = "proggy-textbox proggy-textbox-number" })
                &nbsp; &nbsp; Height: @Html.TextBox(Model.PropertyNameStart + ".Height", Model.Height, new { @class = "proggy-textbox proggy-textbox-number" })
            </p>
        </div>
        <div class="ip-tabs">
            <div class="ip-tab" id="@(internalTabId)">
                Site image
            </div>
            <div class="ip-tab" id="@(externalTabId)">
                External image
            </div>
            @Html.Clear()
            <div class="ip-content" id="@(internalAreaId)">
                @foreach (var folder in Model.GetImageFolders(configObject.ImageFolderUniqueAliases))
                {
                    // get images
                    var images = Model.GetImagesForFolder(folder);

                    // check
                    if (images.Count > 0)
                    {                    
                    <div class="ip-folder">
                        <h5>@folder.Name</h5>
                        <div class="ip-images">
                            @foreach (var img in images)
                            {
                                <div class="ip-image" data-alttag="@img.Name">
                                    <span>@img.Name</span>
                                    <div class="ip-image-container">
                                        <img src="@img.Url" alt="@img.File.FileName" />
                                    </div>
                                    @Html.RadioButton(Model.PropertyNameStart + ".InternalNodeId", img.Id, Model.InternalNodeId != null && img.Id == ((int)Model.InternalNodeId))
                                </div>
                                
                            }
                            @Html.Clear()
                        </div>
                    </div>
                    }
                }
            </div>
            <div class="ip-content" id="@(externalAreaId)">
                <div class="ip-folder">
                    <h5>
                        External url</h5>
                    <div class="ip-external-url">
                        <p>@Html.TextBox(Model.PropertyNameStart + ".ExternalUrl", Model.ExternalUrl, new { @class = "proggy-textbox proggy-textbox-wide" })
                            &nbsp;<input type="button" class="proggy-button-go" value="Update image" onclick="return false;" /></p>
                    </div>
                    <h5>
                        Alt tag</h5>
                    <div class="ip-external-url">
                        <p>@Html.TextBox(Model.PropertyNameStart + ".ExternalAltTag", Model.ExternalAltTag, new { @class = "proggy-textbox proggy-textbox-wide" })</p>
                    </div>
                    <h5>
                        Image</h5>
                    <p class="italic">
                        Will appear as thumbnail, not chosen size</p>
                    <div class="ip-external-url">
                        @if (string.IsNullOrEmpty(Model.ExternalUrl))
                        {
                            <p>
                                No image saved yet...</p>
                            
                        }
                        <div class="ip-external-image-container">
                            <img class="ip-external-image" src="@Model.ExternalUrl"  /></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    // types
    Proggy.Static.WaitForTypesToRegister(function () {

        // get is external
        var isExternal = jQuery("input#@(Model.PropertyNameStart)_IsExternalImage");

        // get value
        var isExternalTrue = isExternal.attr("checked") == "checked";

        // get alt tag
        var internalAltTag = jQuery("input#@(Model.PropertyNameStart)_InternalAltTag");

        // hide
        isExternal.hide();

        // get tabs
        var internalTab = jQuery("#@(internalTabId)");
        var externalTab = jQuery("#@(externalTabId)");

        // get areas
        var internalArea = jQuery("#@(internalAreaId)");
        var externalArea = jQuery("#@(externalAreaId)");

        // get interal image divs
        var imgs = internalArea.find("div.ip-image");

        // get internal image containers
        var imgContainers = imgs.find("div.ip-image-container");

        // NAILTHUMB
        imgContainers.nailthumb();

        // get external url
        var externalUrl = jQuery("input#@(Model.PropertyNameStart)_ExternalUrl");
        var externalUrlImg = externalArea.find("img:first");
        var externalUrlImgContainer = externalArea.find("div.ip-external-image-container:first");

        // nail thumb
        externalUrlImgContainer.nailthumb();

        // change image
        var changeExtImg = function () {

            externalUrlImg = externalArea.find("img:first");

            if (externalUrl.val() != "") {

                externalUrlImg.attr("src", externalUrl.val());

            };
        };

        // get selected
        var selectedImg = imgs.find('input[checked="checked"]').parent();

        // hide radios
        imgs.find("input").hide();

        // bind tab clicks
        internalTab.click(function () {

            // add class
            externalTab.removeClass("ip-tab-selected");
            externalArea.removeClass("ip-area-selected");
            internalTab.addClass("ip-tab-selected");
            internalArea.addClass("ip-area-selected");

            // check
            isExternal.removeAttr("checked");

            // show/hide
            internalArea.show();
            externalArea.hide();

        });

        //
        externalTab.click(function () {

            // add class
            externalTab.addClass("ip-tab-selected");
            externalArea.addClass("ip-area-selected");
            internalTab.removeClass("ip-tab-selected");
            internalArea.removeClass("ip-area-selected");

            // check
            isExternal.attr("checked", "checked");

            // show/hide
            internalArea.hide();
            externalArea.show();

        });

        // bind images click
        imgs.click(function (e) {

            // get target
            var target = e.target.nodeName;

            if (target.toLowerCase() != "input") {

                // get img
                var img = jQuery(this);

                // unselect all
                imgs.removeClass("ip-image-selected");

                // select this
                img.addClass("ip-image-selected");

                // set alt tag
                internalAltTag.val(img.data("alttag"));

                // get radio
                var radioB = img.find('input[type="radio"]:first');


                // select
                radioB.click();
            };

        });

        // bind blur
        externalUrl.blur(function () {
            changeExtImg();
        });
        externalUrl.change(function () {
            changeExtImg();
        });

        // trigger internal anyway
        internalTab.trigger("click");
        selectedImg.trigger("click");

        // check check external
        if (isExternalTrue) {
            externalTab.trigger("click");
        };

    });

</script>
